<template> 
<view class="page">
	<c-header background="#ffffff" type="black" title="设置" :showBack="1"> </c-header> 
	<view class="body">
		<view class="lay-btn-wrap">
			<view class="lay-btn-item avator">
				<view class="content">
					<view class="label-name">头 像</view>  
					<view class="val">
						<view class="con-text"></view>
						<view class="avator-img">
							<image v-if="token&&userInfo.avatarUrl" :src="userInfo.avatarUrl" mode="widthFix">
							<image v-else src="@/static/images/man.png" mode="widthFix">						
						</view> 
					</view>					
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>	
			</view> 
			<view class="lay-btn-item">
				<view class="content">
					<view class="label-name">昵 称</view> 
					<view class="val" @click="showPopup('show','isSetName')">
						<view class="con-text"></view> 
						<view class="link-text m-r2">{{userInfo.nickName}}</view>
					</view> 
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view>
			<view class="lay-btn-item">
				<view class="content">
					<view class="label-name">手机号码</view> 
					<view class="val" @click="showPopup('show','isSetPhone')">
						<view class="con-text"></view> 
						<view class="link-text m-r2">{{userInfo.replace_phone}}</view>
					</view> 
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view>
			<view class="lay-btn-item">
				<view class="content">
					<view class="label-name">性 别</view> 
					<view class="val" @click="showPopup('show','isSetSex');user.sex=userInfo.sex;">
						<view class="con-text"></view> 
						<view class="link-text m-r2">{{userInfo.sex==1?'男':'女'}}</view>
					</view> 
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view>
			<view class="lay-btn-item">
				<view class="content">
					<view class="label-name">生 日</view> 
					<view class="val" @click="showPopup('show','isSetBirthday')">
						<view class="con-text"></view> 
						<view class="link-text m-r2">{{userInfo.format_birthday}}</view>
					</view> 
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view>
			<!-- <view class="lay-btn-item">
				<view class="content">
					<view class="label-name">注册时间</view> 
					<view class="val">
						<view class="con-text split f-grey">2023-12-31 12:00</view> 
						<view class="link-text"></view>
					</view> 
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view> -->
		</view>
		
		<!-- <view class="lay-btn-wrap">			 
			<view class="lay-btn-item" data-url="/pages/member/certification/certification" @click="$login.event($event,1,'navigate')"> 
				<view class="content">							
					<view class="label-name">实名认证</view>
					<view class="val">
						<view class="con-text split">未认证</view> 
						<view class="link-text">去认证</view>
					</view>
					
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- <view class="lay-btn-wrap">
			<navigator url="/" hover-class="none" class="lay-btn-item">
				<view class="content">							
					<view class="label-name">绑定微信</view>
					<view class="val">
						<view class="con-text split">张三</view> 
						<view class="link-text iconfont f-blue f-s40">&#xe6f9;</view>
					</view>
					
					<view class="right-icon">
						<view class="iconfont icon-corrow">&#xe603;</view>
					</view>
				</view>
			</navigator>
		</view> -->
		
		<!-- <view class="logout-btn">退出</view> -->
	
	</view>
	
	<view v-if="flag.isFullPage" class="full-fix-page">
	
		<template>
			<!-- 修改昵称 -->
			<view v-if="flag.isSetName" class="modal-center">
				<view class="modal-wrap">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe723;</view>
					<view class="title">修改昵称</view>
					<view class="modal-form">
						<view class="item">
							<view class="get-phone-code-bar">
								<view class="label m-b2">新昵称</view>
								<view class="code-inp">
									<input type="number" v-model="user.nickName" class="inp" placeholder="输入新昵称"> 
								</view> 
							</view>  
						</view>		 
					</view>
					<view class="modal-form-btn-wrap"> 
						<view class="form-btn confirm" @click="editUser('name','nickName')">确 定</view>
					</view>
				</view>
			</view>
			
			<!-- 修改生日 -->
			<view v-if="flag.isSetBirthday" class="modal-center">
				<view class="modal-wrap">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe723;</view>
					<view class="title">修改生日</view>
					<view class="modal-form">
						<view class="item">
							<view class="get-phone-code-bar">
								<view class="label m-b2">生日</view>
								<picker mode="date" @change="changeBirthday">
									<view class="code-inp">
										<input type="number" v-model="user.format_birthday" disabled class="inp" placeholder="选择日期"> 
										<view class="iconfont f-grey f-s44">&#xe618;</view>
									</view> 
								</picker>
							</view>  
						</view>		 
					</view>
					<view class="modal-form-btn-wrap"> 
						<view class="form-btn confirm" @click="editUser('birthday','birthday')">确 定</view>
					</view>
				</view>
			</view>
			
			<!-- 验证新手机 -->
			<view v-if="flag.isSetPhone" class="modal-center">  
				<view class="modal-wrap">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe723;</view>
					<view class="title">修改手机号</view>
					<view class="modal-form">
						<view class="item">
							<view class="get-phone-code-bar">
								<view class="label m-b2">新手机号</view>
								<view class="code-inp">
									<input type="number" v-model="phone" class="inp" placeholder="输入新手机号"> 
								</view> 
							</view>  
						</view>						 
						<view class="item">
							<view class="get-phone-code-bar">
								<view class="label m-b2">验证码</view>
								<view class="code-inp">
									<input type="number" v-model="captchaCode" class="inp" placeholder="输入验证码"> 
									<view v-if="isSentCode" class="get-code-btn f-grey" :class="{'f-main':phone}" @click="getCode">{{count_time_text}}</view>
									<view v-else class="get-code-btn f-main" >{{count_time_text}}</view>
								</view> 
							</view>  
						</view>
					</view>
					<view class="modal-form-btn-wrap"> 
						<view class="form-btn confirm" @click="editPhone">确 定</view>
					</view>
				</view>
			</view>	
			 
			
			<!-- 修改性别 -->
			<view v-if="flag.isSetSex" class="modal-center">
				<view class="modal-wrap">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe723;</view>
					<view class="title">修改性别</view>
					<view class="modal-form">
						<view class="item">
							<view class="check-sex">
								<view class="label">性 别</view>
								<view class="sex-list">
									<view class="val" :class="{'active':user.sex=='1'}" @click="changeSex(1)">男</view>
									<view class="val" :class="{'active':user.sex=='2'}" @click="changeSex(2)">女</view>
								</view>
							</view>								 
						</view> 
					</view>
					<view class="modal-form-btn-wrap"> 
						<view class="form-btn confirm"  @click="editUser('sex','sex')">确 定</view>
					</view>
				</view>
			</view>
			
			<!-- 修改头像 -->
			<view v-if="flag.isSetAvatar" class="modal-center">
				<view class="modal-wrap">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe723;</view>
					<view class="title">修改头像</view>
					<view class="modal-form">
						<view class="avator">
							<view class="set-btn"><image src="@/static/images/set_avatar_bg.png" mode="widthFix"></image></view>
							<image src="@/static/images/man.png" mode="widthFix"></image> 						 
						</view> 
					</view>
					<view class="modal-form-btn-wrap"> 
						<view class="form-btn confirm" @click="showPopup('hide')">确 定</view>
					</view>
				</view>
			</view>
			
	
		</template>
	
	
	</view>
</view>
</template>

<script> 
import Timer from '@/common/timer.js' 
import {replaceStr} from '@/common/util.js'
export default{
	name:'demo',
	data(){
		return{ 
			appId:getApp().globalData.appId, 
			userInfo:uni.getStorageSync('userInfo'),
			token:uni.getStorageSync('token'),
			flag:{
				isFullPage:false,
				isCheckPhone:false,
				isSetPhone:false,
				isSetSex:false,
				isSetName:false,
				isSetAvatar:false
			},
			count_time_text:'获取验证码',
			phone:'',
			captchaCode:'',
			user:{
				nickName:'',
				sex:uni.getStorageSync('userInfo').sex,
				birthday:'',
				format_birthday:''
			},			
			isSentCode:true,
			timer: null,
			isStop:true
		}
	},
	async onShow() {
		 
	},
	onLoad() {
		
	},
	onUnload() {
		if (this.timer) {
			this.timer.stop();
		}
	},
	methods:{
		
		// 选择生日期
		changeBirthday(e){
			// console.log(e) 2024-01-12 
			this.user.birthday=e.detail.value.split('-').join('');
			this.user.format_birthday=e.detail.value;
		},
		
		// 选择性别
		changeSex(type){
			this.user.sex=type;
		},
		
		// 修改用户信息
		editUser(type,key){
			let params={};
			
			if(type=='name'){
				if(!this.user[key]){
					uni.showToast({
						icon:'none',
						title:"请输入新昵称",
						mask:true,
						duration:2000
					})
					return
				}else{
					params[type]=this.user[key];
				}
			}
			if(type=='birthday'){
				if(!this.user[key]){
					uni.showToast({
						icon:'none',
						title:"请选择生日",
						mask:true,
						duration:2000
					})
					return
				}else{
					params[type]=this.user[key].split('-').join(''); 
				}
			}
			if(type=='sex'){
				params[type]=this.user[key]; 
			}
			if(this.isStop){
				this.isStop=false;
				uni.showLoading({
					mask: true, 
				}) 
				this.$api.user_api.memberEditUser(params).then(res=>{
					console.log(res)
					uni.hideLoading();
					let token=uni.getStorageSync('token');
					let userInfo=uni.getStorageSync('userInfo');
					if(type=='birthday'){
						userInfo['format_birthday']=this.user.format_birthday;	
						this.user['format_birthday']='';
					}else{
						userInfo[key]=params[type];
					}											
					this.userInfo=userInfo;
					this.user[key]='';
					this.$store.dispatch('getUserInfo',token); 					 
					this.isStop = true;
					this.showPopup('hide'); 
				})
			}
		},
		
		// 修改手机号
		editPhone(){
			if(!this.phone){
				uni.showToast({
					icon:'none',
					title:"请输入手机号",
					mask:true,
					duration:2000,
					success() {
						 
					}
				})
			}else if(this.phone.length<11){ 
				uni.showToast({
					icon:'none',
					title:"请输入正确的手机号码",
					mask:true,
					duration:2000,
					success() {
						 
					}
				})  
			}else if(this.captchaCode==''){
				uni.showToast({
					icon:'none',
					title:"请输入短信验证码",
					mask:true,
					duration:2000,
					success() {
						 
					}
				})
			}else{
				if (this.isStop) {
					this.isStop = false;
					uni.showLoading({
						mask: true, 
					}) 
					this.$api.user_api.memberEditPhone({
						phone:this.phone,
						captchaCode:this.captchaCode
					}).then(res=>{
						uni.hideLoading();
						let token=uni.getStorageSync('token');
						let userInfo=uni.getStorageSync('userInfo');
						userInfo.phone=this.phone;
						userInfo.replace_phone=replaceStr(this.phone,3,'****');
						this.userInfo=userInfo;
						this.$store.dispatch('getUserInfo',token); 
						this.phone='';
						this.captchaCode='';
						if (this.timer) {
							this.timer.stop();							
						}
						this.isSentCode=true;
						this.count_time_text="获取验证码";
						this.isStop = true;
						this.showPopup('hide'); 
					})
				}
			}
			
			
		},
		
		// 获取验证码
		getCode(){ 
			let _this=this; 
			if(!this.phone){ 
				uni.showToast({
					icon:'none',
					title:"请输入手机号",
					mask:true,
					duration:2000,
					success() {
						 
					}
				})
			}else if(this.phone.length<11){ 
				uni.showToast({
					icon:'none',
					title:"请输入正确的手机号码",
					mask:true,
					duration:2000,
					success() {
						 
					}
				})  
			}else{
				if(this.isSentCode){
					this.isSentCode=false;
					this.$api.user_api.sendsms({ 
						phone:this.phone, 
						appId:this.appId
					}).then((res)=>{  
						console.log(2312312,res)
						this.count_time_text="验证码已发送";
						this.timer=new Timer({
							type:1, 
							num:60
						})
						this.timer.start({
							success:function(res){ 
								_this.count_time_text=res+'秒后重发'; 
							},
							complate:function(){
								setTimeout(()=>{
									_this.isSentCode=true;
								},300)
								_this.count_time_text="获取验证码"; 
							}
						}) 
					}).catch((err)=>{ 
						uni.showToast({
							icon:'error',
							title:err.data.msg,
							mask:true,
							duration:2000,
							success() {
								 
							}
						})  
					})						 
					
				}
				
				
				
			}
		},
		
		// 打开弹窗
		showPopup(t, n) { 
			if (t == 'show') { 
				this.flag.isFullPage = true;
				this.flag[n] = true;
			} else if (t == 'hide') {
				if(n){ 
					this.flag[n] = false;
				}else{
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}					
			}
		},
	},
	computed:{
		
	},
	components:{
		
	}
}
</script>

<style lang="less">
.avator{ 
	line-height: 120rpx;
	.avator-img{
		width: 120rpx;
		height:120rpx;
		margin-right:20rpx;
		image{
			width: 100%;
		}
	}
}  
.current-phone{
	display: flex; 
	align-items: center;
	margin-bottom: 40rpx;
	font-size: 30rpx;	
	.label{
		width: 120rpx;
	}
}
.get-phone-code-bar{
	// display: flex;
	// align-items: center;
	font-size: 30rpx;
	.label{
		flex-shrink: 0;
		width: 120rpx; 
		color: #333;
	}
	.code-inp{
		position: relative;
		flex-grow: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		padding:20rpx 10rpx;
		font-size:30rpx;
		.inp{
			flex-grow: 2;
			max-width: 70%;
		}
		.get-code-btn{	
			flex-shrink: 0;
			color: #f9ae3d;
		}
	}
}
.check-sex{
	display: flex;
	align-items: center;
	.label{
		width: 120rpx;
		line-height: 60rpx;
	}
	.sex-list{
		display: flex;
		align-items: center;
		.val{
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-right: 20rpx;
			text-align: center;
			border: 2rpx solid #eee;
			border-radius: 8rpx;
			color: #999;
			font-size: 30rpx;
		}
		.active{
			border: 2rpx solid #f9ae3d;
			background: #f9ae3d;
			color: #fff;
		}
	}
}
.lay-btn-wrap{
	margin-top:20rpx;
	padding-left:20rpx;
	background: #fff;
	border-bottom:2rpx solid #eee;
}
.lay-btn-item{
	display: flex; 
	align-items: center;
	justify-content: space-between; 
	.icon-label{
		display: flex;
		align-items: center;	
		width:60rpx;
		text-align: center;
		color:#09f; 
		image{
			width:38rpx;
		}
	}
	.content{
		display: flex;
		align-items: center; 
		flex-grow: 2;
		width:80%;
		padding:25rpx 0;
		border-bottom:1rpx solid #eee;
		.label-name{
			width:200rpx;  
			display: flex; 
			font-size:30rpx;
			color:#000;
			image{
				width:100rpx;
			}
		}
		.val{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-grow: 2;
			width:60%;
			margin-right: 8rpx;
			font-size:30rpx;
			color:#666;
			.con-text{
				flex-grow: 2; 
				max-width:80%;
			}
			.link-text{
				color:#666; 
			}
		}
		.right-icon{
			width:50rpx; 
			.icon-corrow{
				color:#ccc;
				font-size: 28rpx;
			}
		}
		.switch-btn{
			width:100rpx;
		}
	}
	
}   
.lay-btn-item:last-child .content{
	border-bottom:0 none;
	
}   
.logout-btn{
	margin:20rpx;
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #f9ae3d; 
	border-radius: 10rpx;
	color:#fff;
	font-size:32rpx;
}
</style>
